<!DOCTYPE html>
<html>
<head>
<title>ToDo API Client Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
</head>
<body>
    <div class="navbar">
        <div class="navbar-inner">
            <a class="brand" href="#">ToDo API Client Demo</a>
        </div>
    </div>

    <div id="main" class="container">
      <ul>
      <!-- ko foreach: employees -->
        <li>
          <p data-bind="text: employeefirstname"></p>
          <p data-bind="text: employeesurname"></p>
        </li>
      <!-- /ko -->
      </ul>
    </div>

    <script type="text/javascript">
      var employees;
      function EmployeesViewModel()
      {
        var self = this;
        self.employeesUri = 'http://localhost:5000/pygem/api/v1.0/employees'
        self.employees = ko.observableArray();
        self.ajax = function(uri, method, data)
        {
          var request =
          {
            url: uri,
            type: method,
            contentType: "application/json",
            accepts: "application/json",
            cache: false,
            dataType: 'json',
            data: JSON.stringify(data),
            error: function(jqXHR)
            {
              console.log('error ' + jqXHR);
            }
          };

          return $.ajax(request);
        }
        self.beginAdd = function()
        {
          alert('adding new employee');
        }
        self.beginEdit = function()
        {
          alert('editing employee');
        }
        self.remove = function()
        {
          alert('removing employee');
        }
        self.ajax(self.employeesUri, 'GET').done(function(data)
        {
          data = JSON.parse(JSON.stringify(data['employees']));
          employees = data; // For test purposes
          $.each(data, function(i, employee)
          {
            employee = JSON.parse(employee);
            self.employees.push({
              employeefirstname: ko.observable(employee['employeefirstname']),
              employeesurname: ko.observable(employee['employeesurname'])
            });
          });
       });
      }
      ko.applyBindings(new EmployeesViewModel(), $('#main')[0]);
    </script>
</body>
</html>